﻿@page "/lights"

<h3>Light 指示灯</h3>

<h4>提供各种状态的指示灯</h4>

<DemoBlock Title="普通用法" Introduction="用于状态指示" Name="Normal">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="闪烁" Introduction="通过设置属性 <code>IsFlash</code> 使指示灯进行闪烁" Name="Flashing">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Info" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Warning" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Primary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Secondary" IsFlash="true"></Light>
        </div>
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Dark" IsFlash="true"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="变色" Introduction="通过设置属性 <code>Color</code> 值使指示灯进行变色" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light IsFlash="true" Color="@Color"></Light>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="提示文字" Introduction="通过设置属性 <code>Title</code> 值使鼠标悬浮指示灯上时提示 <code>tooltip</code> 文字" Name="Title">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
            <Light Color="Color.Danger" Title="我是提示文字信息"></Light>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
